<template>
  <div>
    <el-card class="box-card">
      <!--联动下拉框-->
      <el-select v-model="value1" placeholder="请选择一级分类" @change="selectChange1">
        <el-option v-for="item in options1" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>

      <el-select
        v-model="value2"
        collapse-tags
        style="margin-left: 20px;"
        placeholder="请选择二级分类"
        @change="selectChange2"
      >
        <el-option v-for="item in options2" :key="item.value" :label="item.name" :value="item.id"></el-option>
      </el-select>

      <el-select
        v-model="value3"
        collapse-tags
        style="margin-left: 20px;"
        placeholder="请选择三级分类"
        @change="selectChange3"
      >
        <el-option v-for="item in options3" :key="item.value" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <br />您选择的商品是:
      <el-tag v-for="item in objs" :key="item.id">{{item.name}}</el-tag>
      <br />
      <el-divider>
        <i class="el-icon-mobile-phone"></i>
      </el-divider>
      <el-button type="primary" @click="nextStep">下一步,填写商品信息</el-button>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      options1: [],
      options2: [],
      options3: [],
      value1: [],
      value2: [],
      value3: [],
      parentId: 0,
      objs: [], // 存储id 跟name
      id1: 0,
      id2: [],
      id3: [],
      data: this.object
    }
  },
  props: {
    object: Array
  },
  methods: {

    // 下一步
    nextStep () {
      if (this.objs !== undefined && this.objs.length > 0) {
        if (this.objs.length > 2) {
          this.$emit('listenToChildEvent', this.objs)
        } else {
          alert('请选择到三级分类')
        }
      }
    },
    // 第一个下拉框选中的操作
    async selectChange1 () {
      // 从别的页面过来回显过先清空 数组
      if (this.objs.length >= 3) {
        this.objs = []
      }
      if (this.objs !== undefined && this.objs.length > 0) {
        for (let i = 0; i < this.objs.length; i++) {
          if (this.objs[i].id === this.id) {
            this.id = this.value1
            this.objs.splice(i, 3);
          }
        }
      } else {
        this.id = this.value1
      }
      this.value2 = ''
      this.value3 = ''
      this.parentId = this.value1
      const { data: res } = await this.$http.get(`goods/category/selectParentId?parentId=${this.parentId}`)
      this.options2 = res.data
      this.addObjs(this.options1, this.value1)
    },
    // 第二个下拉框选中的操作
    async selectChange2 () {
      if (this.objs !== undefined && this.objs.length > 0) {
        if (this.objs.length > 1) {
          for (let i = 0; i < this.objs.length; i++) {
            if (this.objs[i].id === this.id2) {
              this.id2 = this.value2
              this.objs.splice(i, 2);
            }
          }
        } else {
          this.id2 = this.value2
        }
      }
      this.value3 = ''
      this.parentId = this.value2
      const { data: res } = await this.$http.get(`goods/category/selectParentId?parentId=${this.parentId}`)
      this.options3 = res.data
      this.addObjs(this.options2, this.value2)
    },
    // 第三个下拉框选中的操作
    async selectChange3 () {
      if (this.objs !== undefined && this.objs.length > 0) {
        if (this.objs.length > 2) {
          for (let i = 0; i < this.objs.length; i++) {
            if (this.objs[i].id === this.id3) {
              this.id3 = this.value3
              this.objs.splice(i, 1);
            }
          }
        } else {
          this.id3 = this.value3
        }
      }
      this.parentId = this.value3
      this.addObjs(this.options3, this.value3)
    },
    // 拼接选择的 name名
    addObjs (list, id) {
      list.forEach(element => {
        if (element.id === id) {
          // if (element.parentId === 0) {
          this.objs.push({ id: element.id, name: element.name, parentId: element.parentId, templateId: element.templateId })
          // }
        }
      })
    }
  },
  async created () {
    const { data: res } = await this.$http.get(`goods/category/selectParentId?parentId=${this.parentId}`)
    this.options1 = res.data
    console.log(this.options1)
    if (this.object !== undefined && this.object.length > 0) {
      this.value1 = this.object[0].name
      this.value2 = this.object[1].name
      this.value3 = this.object[2].name
      this.objs = this.object
      const index = this.objs.length - 1
      this.objs.splice(index, 1)
    }
  }
}
</script>

<style  scoped>
</style>
